<template>
    <div class="sxy">
        <div class="swiper1">
            <el-carousel :interval="5000" type="card" arrow="never">
                <el-carousel-item v-for="item in this.data" :key="item">
                    <img :src="item" alt="正在加载...">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="bx">
            <div class="swiper2">
                <div class="df"></div>
                <ul>
                    <li :class="{ 'active': style == 1 }" @click="style = 1,trans(0)">
                        昆明洲际随心驿
                    </li>
                    <li :class="{ 'active': style == 2 }" @click="style = 2,trans(0)">
                        北京工体随心驿
                    </li>
                    <li :class="{ 'active': style == 3 }" @click="style = 3,trans(0)">
                        杭州大运河随心驿
                    </li>
                </ul>

                <div v-show="style == 1" class="sw1">
                    <div id="sw1" class="sw1-1">
                        <img v-for="(index,i) in this.value3" :key="i" :src="index" alt="">
                    </div>
                    <ul>
                        <li :class="{ 'active': sk == 0 }" @click="trans(0)"><i class="el-icon-school" style="font-size:20px;color: #fb9032;">&nbsp</i>优雅舒适的户外休息区</li>
                        <li :class="{ 'active': sk == 1 }" @click="trans(1)"><i class="el-icon-table-lamp" style="font-size:20px;color: #fb9032;">&nbsp</i>温馨大气的大房间</li>
                        <li :class="{ 'active': sk == 2 }" @click="trans(2)"><i class="el-icon-suitcase-1" style="font-size:20px;color: #fb9032;">&nbsp</i>如梦如幻的酒店景观</li>
                        <li :class="{ 'active': sk == 3 }" @click="trans(3)"><i class="el-icon-magic-stick" style="font-size:20px;color: #fb9032;">&nbsp</i>宽敞干净的房间</li>
                        <li :class="{ 'active': sk == 4 }" @click="trans(4)"><i class="el-icon-fork-spoon" style="font-size:20px;color: #fb9032;">&nbsp</i>厨艺精湛的大厨</li>
                        <li :class="{ 'active': sk == 5 }" @click="trans(5)"><i class="el-icon-bangzhu" style="font-size:20px;color: #fb9032;">&nbsp</i>高贵典雅的房间装饰</li>
                    </ul>
                </div>
                <div v-show="style == 2" class="sw2">
                    <div id="sw2" class="sw2-1">
                        <img v-for="(index,i) in this.value" :key="i" :src="index" alt="">
                    </div>
                    <ul>
                        <li :class="{ 'active': sk == 0 }" @click="trans(0)"><i class="el-icon-soccer" style="font-size:20px;color: #fb9032;">&nbsp</i>坐落工体南隅</li>
                        <li :class="{ 'active': sk == 1 }" @click="trans(1)"><i class="el-icon-user-solid" style="font-size:20px;color: #fb9032;">&nbsp</i>温馨舒适</li>
                        <li :class="{ 'active': sk == 2 }" @click="trans(2)"><i class="el-icon-table-lamp" style="font-size:20px;color: #fb9032;">&nbsp</i>跨界新型社交</li>
                        <li :class="{ 'active': sk == 3 }" @click="trans(3)"><i class="el-icon-school" style="font-size:20px;color: #fb9032;">&nbsp</i>更加舒适</li>
                        <li :class="{ 'active': sk == 4 }" @click="trans(4)"><i class="el-icon-school" style="font-size:20px;color: #fb9032;">&nbsp</i>安全放心</li>
                        <li :class="{ 'active': sk == 5 }" @click="trans(5)"><i class="el-icon-bangzhu" style="font-size:20px;color: #fb9032;">&nbsp</i>快速极致</li>
                    </ul>
                </div>
                <div v-show="style == 3" class="sw3">
                    <div id="sw3" class="sw3-1">
                        <img v-for="(index,i) in this.value2" :key="i" :src="index" alt="">
                    </div>
                    <ul>
                        <li :class="{ 'active': sk == 0 }" @click="trans(0)"><i class="el-icon-wind-power" style="font-size:20px;color: #fb9032;">&nbsp</i>大运河终点</li>
                        <li :class="{ 'active': sk == 1 }" @click="trans(1)"><i class="el-icon-coffee-cup" style="font-size:20px;color: #fb9032;">&nbsp</i>最美杭州，浓浓茶香</li>
                        <li :class="{ 'active': sk == 2 }" @click="trans(2)"><i class="el-icon-table-lamp" style="font-size:20px;color: #fb9032;">&nbsp</i>干净舒适</li>
                        <li :class="{ 'active': sk == 3 }" @click="trans(3)"><i class="el-icon-school" style="font-size:20px;color: #fb9032;">&nbsp</i>温馨装饰</li>
                        <li :class="{ 'active': sk == 4 }" @click="trans(4)"><i class="el-icon-magic-stick" style="font-size:20px;color: #fb9032;">&nbsp</i>安全放心</li>
                        <li :class="{ 'active': sk == 5 }" @click="trans(5)"><i class="el-icon-bangzhu" style="font-size:20px;color: #fb9032;">&nbsp</i>快速极致</li>
                    </ul>
                </div>
            </div>
            <div class="fj">
                <p @click="ma=true"></p>
                <p @click="ma=true"></p>
                <p @click="ma=true"></p>
                <p @click="ma=true"></p>
                <div :class="{'active':ma==true}" @click="ma=false" id="ma">
                    <img src="../assets/free-head.png" alt="">
                    <h3>扫一扫</h3>
                    <h3>手机看房</h3>
                </div>
                <img src="../assets/fj.jpg" alt="">
            </div>
            
        </div>
        <div class="fff">
                <img src="../assets/fff.jpg" alt="">
            </div>
    </div>
</template>



<script>
export default {
    data() {
        return {
            sk:0,
            style: 1,
            ma:false,
            data: [
                "http://image.ziroom.com/g2/M00/5A/D2/ChAFD1mc63WAIRtLAAQ-9qoGh6k008.jpg",
                "http://image.ziroom.com/g2/M00/5F/C9/ChAFfVmj---AT6EEAAZPJ2s8eeg151.jpg",
                "http://image.ziroom.com/g2m2/M00/4B/EA/CtgFCV2y_eqAd-71AAQ8PL6VNmA656.jpg",
                "http://image.ziroom.com/g2/M00/5F/C9/ChAFD1mj-6qATmUqAAXEpI7-1T8410.jpg"
            ],
            value: [
                "http://image.ziroom.com/g2/M00/5F/CA/ChAFfVmj_FOAerRaAAWiJyTnOCQ972.jpg",
                "http://image.ziroom.com/g2m2/M00/47/24/CtgFCF2xq0yAA63oAAQjETixgrY731.JPG",
                "http://image.ziroom.com/g2m2/M00/37/F4/CtgFCV2tlXWAd0XtAARvZACy8N8543.JPG",
                "http://image.ziroom.com/g2m2/M00/37/F6/CtgFCV2tleGAQnLzAAOWQHVkqX4198.JPG",
                "http://image.ziroom.com/g2/M00/5B/07/ChAFD1mdKJiAfIUNAABer5AbhKs260.jpg",
                "http://image.ziroom.com/g2/M00/5B/BA/ChAFfVmeRBOACj30AAEBTRJQB9U428.jpg"
            ],
            value2: [
                "http://image.ziroom.com/g2m3/M00/54/63/ChAZVF50gtKASeMGAAP6mdSpcUw041.jpg",
                "http://image.ziroom.com/g2m3/M00/53/D7/ChAZVF50ddCAIZ1aAAQ9uIlkX1E866.jpg",
                "http://image.ziroom.com/g2m3/M00/53/BE/ChAZVF50c0-AeqkFAASOkWmIRRc199.jpg",
                "http://image.ziroom.com/g2m3/M00/53/B1/ChAZE150eJWAez-WAAN_T8KDeFQ603.jpg",
                "http://image.ziroom.com/g2/M00/5B/07/ChAFD1mdKJiAfIUNAABer5AbhKs260.jpg",
                "http://image.ziroom.com/g2/M00/5B/BA/ChAFfVmeRBOACj30AAEBTRJQB9U428.jpg"
            ],
            value3: [
                "https://ac-a.static.booking.cn/xdata/images/hotel/max1024x768/310753499.jpg?k=4a070845a078f7bcaa822253d9f16d3058bd3ab8a59d0e49a841acc3ad9c233c&o=&hp=1",
                "https://ac-a.static.booking.cn/xdata/images/hotel/max1024x768/290820309.jpg?k=31be28cfb63f06a5556a9476065693f5a52fec8a1ba1fd02c456fe4269864d7c&o=&hp=1",
                "https://ac-a.static.booking.cn/xdata/images/hotel/max1024x768/290820896.jpg?k=f591f5de1ea1991b8a316a648b715825567f5cc261ace9584094f5788fc26d69&o=&hp=1",
                "https://ac-a.static.booking.cn/xdata/images/hotel/max1024x768/310753481.jpg?k=f4678cfe535a7c630102c5e33bc8acb92c6e30d0e78656e26abfadd990ae8587&o=&hp=1",
                "https://ac-a.static.booking.cn/xdata/images/hotel/max1024x768/290824460.jpg?k=88a90fe6e4cb0fd45c838973f597f2298c5a096475142812de7c7af75474dc53&o=&hp=1",
                "https://ac-a.static.booking.cn/xdata/images/hotel/max1024x768/314581228.jpg?k=870ebbf1f20f334463e9f3eb2ac368d0f5fc57f8a90e896ea3f756ae2b2536a9&o=&hp=1"
            ],
        }
    },
    mounted() {
    },
    methods: {
        trans(index) {
            let a=450*index
            this.sk=index
            let sw1 = document.getElementById('sw1')
            let sw2 = document.getElementById('sw2')
            let sw3 = document.getElementById('sw3')
            sw1.style = `transform: translateY(-${a}px)`
            sw2.style = `transform: translateY(-${a}px)`
            sw3.style = `transform: translateY(-${a}px)`
            console.log(index)
        }
}}
</script>


<style lang="scss">
.sxy {
    margin-top: 65px;
}

.bx {
    width: 1252px;
    margin: auto;
}

.swiper1 {
    padding-top: 10px;
    background-color: rgba($color: #000000, $alpha: 0.05);

    .el-carousel__item img {
        width: 100%;
        height: 100%;
    }

    .el-carousel {
        width: 100vw;
        height: 27vw;
    }

    .el-carousel__container {
        width: 100%;
        height: 100%;
    }
}

.swiper2 {
    margin-top: 60px;

    .df {
        margin: 30px auto;
        width: 260px;
        height: 86px;
        background-image: url("../assets/df.jpg");
        background-size: 100%;
    }

   

    ul {
        list-style-type: none;
        width: 100%;
        height: 50px;
        margin: 10px;
        margin-bottom: 0;

        li {
            float: left;
            width: 417.3px;
            font-size: 25px;
            font-weight: bold;
            color: rgb(82, 78, 75);
            text-align: center;
            height: 100%;
            transition: all 0.5px;
            cursor: pointer;

            &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 1;
                width: 200px;
                height: 2px;
                margin-left: 110px;
                margin-top: 15px;
                transition: 0.3s;
                border-radius: 3px;
                transform: scaleX(0);
                background-color: #fb9032;
            }

            &.active::after {
                color: #ff4400;
                transform: scaleX(1);
            }

            &.active {
                color: #ff6600;
            }
        }
    }
    .sw1,.sw2,.sw3 {
    width: 100%;
    margin-top: 10px;
    height: 450px;
    position: relative;
    overflow: hidden;
    .sw1-1,
    .sw2-1,
    .sw3-1 {
        width: 800px;
        height: 600%;
        transition: all 1s;
        transform: translateY(0);
        img {
            display: block;
            width: 100%;
            height: 450px;
        }
    }
    ul{
        display: block;
        list-style-type: none;
        width: 452px;
        position: absolute;
        z-index: 3;
        top: 0;
        right: 0;
        height: 450px;
        margin: 0;
            li{
                height: 75px;
                box-sizing: border-box;
                font-weight: 500;
                width: 100%;
                font-size: 20px;
                text-align: left;
                border-bottom: 1px dashed #ffb194;
                color: rgb(125, 125, 125);
                padding: 25px 0 0 90px;
               &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 1;
                width: 200px;
                height: 1px;
                margin-left: 0px;
                margin-top: 8px;
                transition: 0.3s;
                border-radius: 3px;
                transform: scaleX(0);
                background-color: #fb9032;
            }

            &.active::after {
                color: #ff4400;
                transform: scaleX(1);
            }

            &.active {
                color: #ff6600;
            }
            }
        }
}
}
.fj{
    margin: 30px auto;
    position: relative;
    p{position: absolute;
        z-index: 1;
        width: 133px;
        height: 32px;
        cursor: pointer;
        background-color: rgba($color: #000000, $alpha: 0);}
    #ma{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #ffffff, $alpha: 0.8);
        z-index: 2;
        padding-top: 270px;
        height: 620px;
        box-sizing: border-box;
        color: rgb(251, 100, 0);
        left:0;
        display: block;
        transform: scale(0);
        text-align:center;
        opacity: 0;
        transition: all 0.5s;
        &.active{transform:scale(1);opacity: 1;}
    }
    p:nth-of-type(1){
        top:100px;
        left:370px
    }
    p:nth-of-type(2){
        top:100px;
        right:140px
    }
    p:nth-of-type(3){
        bottom:198px;
        left:370px
    }
    p:nth-of-type(4){
        bottom:198px;
        right:140px
    }
}

</style>
